---
sidebar_position: 1
---

import "@site/src/languages/highlight";
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# Dora Start!

## 1. Installation

- Android
  - 1. Download and install the [APK](https://github.com/ippclub/Dora-SSR/releases/latest) package on the game's running terminal.
  - 2. Run the software and access the server address displayed by the software through the browser of the PC (tablet or other development device) in the LAN.
  - 3. Start game development.
- Windows, macOS
  - 1. Download and run the [software](https://github.com/ippclub/Dora-SSR/releases/latest).
       - Get software on macOS with Homebrew using
          ```sh
          brew tap ippclub/dora-ssr
          brew install --cask dora-ssr
          ```
  - 2. Access the server address displayed by the software through a browser.
  - 3. Start game development.
- Linux
  - 1. Installation.
    - Ubuntu Jammy
      ```sh
      sudo add-apt-repository ppa:ippclub/dora-ssr
      sudo apt update
      sudo apt install dora-ssr
      ```
    - Debian Bookworm
      ```sh
      sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 9C7705BF
      sudo add-apt-repository -S "deb https://ppa.launchpadcontent.net/ippclub/dora-ssr/ubuntu jammy main"
      sudo apt update
      sudo apt install dora-ssr
      ```
  - 2. Run the software and access the server address displayed by the software through a browser.
  - 3. Start game development.

## 2. Write the Game

1. Step One: Create a new project
   - In the browser, open the right-click menu of the game resource tree on the left side of the Dora Dora editor.
   - Click the `New` menu item, select "New Folder", and name it `Hello`.
2. Step Two: Write the game code
   - Create a new game entry code file in the project folder, select the Yuescript language (or Teal, Lua, Typescript), and name it `init`.
   - Write the code:

<Tabs>
<TabItem value="tsx" label="TSX">

```tsx title="Hello/init.tsx"
// @preview-file on
import {React, toNode, useRef} from 'DoraX';
import {Ease, Move, Sprite} from 'Dora';

const spriteRef = useRef<Sprite.Type>();

// create the root node of the game scene tree
// and a sprite as a child node
toNode(
	<node onTapBegan={(touch) => {
		const {current: sprite} = spriteRef;
		if (sprite) {
			sprite.perform(Move(
				1, // duration in seconds
				sprite.position, // start position
				touch.location, // end position
				Ease.OutBack // easing function
			));
		}
	}}>
		<sprite ref={spriteRef} file='Image/logo.png'/>
	</node>
);
```

</TabItem>
<TabItem value="yue" label="Yuescript">

```yue title="Hello/init.yue"
-- import modules
_ENV = Dora

-- create a sprite
sprite = Sprite "Image/logo.png"

-- create the root node of the game scene tree
with Node!

	-- mount the sprite to the root node
	\addChild sprite

	-- receive and process click events to move the sprite
	.touchEnabled = true
	\slot "TapBegan", (touch)->
		sprite\perform Move(
			1 -- duration in seconds
			sprite.position -- start position
			touch.location -- end position
			Ease.OutBack -- easing function
		)
```

</TabItem>
<TabItem value="lua" label="Lua">

```lua title="Hello/init.lua"
-- import modules
local Sprite <const> = require("Sprite")
local Node <const> = require("Node")
local Move <const> = require("Move")
local Ease <const> = require("Ease")

-- create a sprite
local sprite = Sprite("Image/logo.png")

-- create the root node of the game scene tree
local root = Node!

-- mount the sprite to the root node
root:addChild(sprite)

-- receive and process click events to move the sprite
root.touchEnabled = true
root:slot("TapBegan", function(touch)
	sprite:perform(Move(
		1, -- duration in seconds
		sprite.position, -- start position
		touch.location, -- end position
		Ease.OutBack -- easing function
	))
end)
```

</TabItem>
<TabItem value="tl" label="Teal">

```tl title="Hello/init.tl"
-- import modules
local Sprite <const> = require("Sprite")
local Node <const> = require("Node")
local Move <const> = require("Move")
local Ease <const> = require("Ease")
local type Touch = require("TouchType")

-- create a sprite
local sprite = Sprite("Image/logo.png")

-- create the root node of the game scene tree
local root = Node!

-- mount the sprite to the root node
root:addChild(sprite)

-- receive and process click events to move the sprite
root.touchEnabled = true
root:slot("TapBegan", function(touch: Touch)
	sprite:perform(Move(
		1, -- duration in seconds
		sprite.position, -- start position
		touch.location, -- end position
		Ease.OutBack -- easing function
	))
end)
```

</TabItem>
<TabItem value="ts" label="Typescript">

```ts title="Hello/init.ts"
// import modules
import {Ease, Move, Node, Slot, Sprite} from 'Dora';

// create a sprite
const sprite = Sprite("Image/logo.png");

// create the root node of the game scene tree
const root = Node();

// mount the sprite to the root node
root.addChild(sprite);

// receive and process click events to move the sprite
root.touchEnabled = true;
root.slot(Slot.TapBegan, touch => {
	sprite.perform(
		Move(
			1, // duration in seconds
			sprite.position, // start position
			touch.location, // end position
			Ease.OutBack // easing function
		)
	);
});
```

</TabItem>
</Tabs>

3. Step Three: Run the game

Click the `🎮` icon in the lower right corner of the editor, then click the `Run` menu item. Alternatively, press the `Ctrl + r` key combination.

## 3. Publish the Game

1. Open the right-click menu of the newly created project folder in the game resource tree on the left side of the editor.
2. Click the `Download` option and wait for the browser to prompt for downloading the packaged project file.
